(function(){
    let bannerBox=document.getElementById("bannerBox");
    let pagination=document.querySelector(".pagination");
    let paginationList=null;//小圆点
    let wrapper=document.querySelector(".wrapper");//移动的容器
    let w=bannerBox.offsetWidth;//求图片容器的宽度，等于图片宽度
    let step=0;//设置初始步长
    let timer=null;//定时器
    let count=0;//总的图片个数
    let data=null;

    //1.获取数据  2.循环渲染
    function render(){
        //1.获取数据
        let xhr=new XMLHttpRequest;
        xhr.open("get","data.json",false);
        xhr.onreadystatechange=function(){
            if(xhr.status===200&&xhr.readyState===4){
                 data=JSON.parse(xhr.response);
            }
        }
        xhr.send(null);

        //2.循环渲染
        let str="",str2="";
        data.forEach((item,index)=>{
            let {pic}=item;
            str+=`<div class="slide"><img src="${pic}" alt=""></div>`;
            str2+=`<span class="${index===step?'active':''}" index="${index}"></span>`;
        })
        str+=`<div class="slide"><img src="${data[0].pic}" alt=""></div>`;
        
        wrapper.innerHTML=str;
        pagination.innerHTML=str2;
        count=data.length+1;//总图片个数要修改
        //循环渲染结束后，再获取小圆点
        paginationList=document.querySelectorAll(".pagination span");
    }
    render();
 
    //自动轮播
    function autoPlay(){
        step++;
        if(step>count-1){
            //transitionDuration 动画时间
            wrapper.style.transitionDuration="0s";//立刻停止动画
            step=0;
            wrapper.style.left=`-${step*w}px`;//由最后一幅图回到第一幅图
            
            wrapper.offsetHeight;//获取一次属性，提前更新一次页面

            wrapper.style.transitionDuration="0.3s";//重新开启动画
            step=1;//第一幅图到第二幅图
        }
        wrapper.style.left=`-${step*w}px`;
        activeCricle();
    }
    timer=setInterval(autoPlay,1000)

    //移入 轮播图停止  mouseover  mouseenter
    bannerBox.onmouseenter=function(){
        clearInterval(timer);
        timer=null;
    }
    //移出 轮播图重新开始 mouseout  mouseleave
    bannerBox.onmouseleave=function(){
        timer=setInterval(autoPlay,1000)
    }

    //小圆点样式跟随
    function activeCricle(){
        let temp=step;//0,1,2,3
        if(temp===count-1){//temp===3
            temp=0;//0,1,2,0
        }
        paginationList.forEach((item,index)=>{
            if(index===temp){//0-0 1-1 2-2 0-3(0-0)
                item.className="active";
            }else{
                item.className="";
            }
        })
    }
   
    //事件委托：将事件统一绑定给其祖先元素，减少事件的绑定来提高性能
    bannerBox.onclick=function(e){ //e:event事件对象
        // console.log(e.target);//e.target 触发事件的目标元素
        // console.log(e.target.tagName);//e.target.tagName目标元素的标签名 大写
        // console.log(e.target.className);//e.target.className 目标元素的class值

        if(e.target.tagName==="SPAN"){
            //console.log("小圆点");
            //获取目标元素（点击的小圆点）的索引下标
            //获取的 index 是字符串，不要忘记转为数值
            let index=+e.target.getAttribute("index");
            //0-0 1-1 2-2 / step===3&&index===0 不做操作
            if(step===index||(step===count-1&&index===0)){
                return;
            }
            step=index;
            wrapper.style.left=`-${step*w}px`;
            activeCricle();
        }
        if(e.target.className==="navigation prev"){
            // console.log("左按钮");
            step--;
            if(step<0){
                wrapper.style.transitionDuration="0s";//立刻停止动画
                step=count-1;//最后一幅图
                wrapper.style.left=`-${step*w}px`;//由第一幅图变成最后一幅图
     
                wrapper.offsetWidth;//获取一次属性，提前更新一次页面

                wrapper.style.transitionDuration="0.3s";//重新开始动画
                step=count-2;//倒数第二幅图
            }
            wrapper.style.left=`-${step*w}px`;
            activeCricle();
        }
        if(e.target.className==="navigation next"){
            //console.log("右按钮");
            autoPlay();
        }
    }
})()